﻿<!DOCTYPE html>
<html class="no-js css-menubar" lang="zh-cn">

<head>
  <title>Mars2D地图 echarts插件</title>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <!-- 移动设备 viewport -->
  <meta name="viewport"
    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" />
  <meta name="author" content="火星科技 http://mars2d.cn " />
  <!-- 360浏览器默认使用Webkit内核 -->
  <meta name="renderer" content="webkit" />
  <!-- Chrome浏览器添加桌面快捷方式（安卓） -->
  <link rel="icon" type="image/png" href="img/favicon/favicon.png" />
  <meta name="mobile-web-app-capable" content="yes" />
  <!-- Safari浏览器添加到主屏幕（IOS） -->
  <link rel="icon" sizes="192x192" href="img/favicon/apple-touch-icon.png" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="apple-mobile-web-app-title" content="火星科技 MarsGIS" />
  <!-- Win8标题栏及ICON图标 -->
  <link rel="apple-touch-icon-precomposed" href="img/favicon/apple-touch-icon.png" />
  <meta name="msapplication-TileImage" content="img/favicon/app-icon72x72@2x.png" />
  <meta name="msapplication-TileColor" content="#62a8ea" />

  <!--引入基础lib-->

  <!-- lib -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" crossorigin="" />
  <script src="https://unpkg.com/leaflet/dist/leaflet.js" crossorigin=""></script>
  <script src="https://unpkg.com/@turf/turf/turf.min.js" type="text/javascript"></script>
  <script src="https://mars2d.cn/lib/jquery/jquery-2.1.4.min.js" type="text/javascript"></script>
  <script src="https://mars2d.cn/lib/hao/haoutil.js" type="text/javascript"></script>
  <link href="https://cdn.jsdelivr.net/npm/mars2d/dist/mars2d.css" rel="stylesheet" type="text/css" />
  <script src="https://cdn.jsdelivr.net/npm/mars2d/dist/mars2d.js" type="text/javascript"></script>


  <!--当前插件-->
  <script type="text/javascript" src="dist/mars2d-esri.js"></script>

  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      border: none;
      overflow: hidden;
      font-size: 14px;
    }
  </style>
</head>

<body>
  <div id="mars2dContainer" class="mars2d-container"></div>

  <!--业务代码-->
  <script type="text/javascript">
    //读取 config.json 配置文件
    var configUrl = "http://mars2d.cn/config/config.json";

    mars2d.Util.fetchJson({ url: configUrl })
      .then(function (data) {
        initMap(data.mars2d);
      })
      .catch(function (error) {
        console.log(error);
        haoutil.alert(error && error.message, "出错了");
      });



    var map;


    //创建三维地球场景
    function initMap(options) {
      //合并属性参数，可覆盖config.json中的对应配置
      let mapOptions = mars2d.Util.merge(options, {});

      //创建地图
      map = new mars2d.Map("mars2dContainer", mapOptions);

      console.log("地图构造完成", map)

      let layer = new mars2d.layer.ArcGisDynamicLayer({
        name: "合肥建筑物",
        url: "//server.mars2d.cn/arcgis/rest/services/mars/guihua/MapServer",
        popup: "all",
        highlight: {
          fill: true,
          fillColor: "#000dfc",
          fillOpacity: 0.3,
          outline: true,
          outlineWidth: 2,
          outlineColor: "#254dc4",
          outlineOpacity: 1,
        },
        zIndex: 20,
      });
      map.addLayer(layer);

      layer.on(mars2d.EventType.click, function (event) {
        console.log("单击了矢量数据，共" + event.graphics.length + "条", event);
      });


      let layer2 = new mars2d.layer.ArcGisFeatureLayer({
        name: "合肥市",
        url: "http://server.mars2d.cn/arcgis/rest/services/mars/hefei/MapServer/20",
        popup: "all",
      });
      map.addLayer(layer2);
    }


  </script>
</body>

</html>
